﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.ScheduleOverrids.IndexModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "特殊排班";
}
@section styles
{
    <abp-style src="/Pages/Appointments/ScheduleOverrides/Index.css"></abp-style>
}
@section scripts
{
    <abp-script src="/Pages/Appointments/ScheduleOverrides/Index.cshtml.js"></abp-script>
}
<div class="content-container">
    <div id="app">
        <div class="container-body">
            <div class="nav-container" >
                <el-tree :data="treeData" :props="defaultProps" default-expand-all :highlight-current="true" :expand-on-click-node="false" v-on:node-click="nodeClicked" node-key="id">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <a>
                            <cite>{{node.label }}</cite>
                        </a>
                    </span>
                </el-tree>
            </div>
            <div class="table-container">
                <el-row :span="24"> 
                    <div class="title-container">
                        <div class="device-name">
                            <span>{{department?department.name:''}}{{device?'.':''}}{{device?device.name:''}}</span>
                        </div>
                        <div class="new-button-container">
                            <el-button v-on:click="showCreate" icon="el-icon-plus" size="mini" v-if="createPermission && department">新建</el-button>
                        </div>
                    </div>
                </el-row>
                <el-table :data="tableData" height="500" size="mini" empty-text="暂无特殊排班计划" class="el-table" row-key="id" ref="so-table" v-show="department && device" :select-on-indeterminate="true" highlight-current-row v-on:current-change="currentRowChange">
                    <el-table-column label="序号" type="index"  align="center">

                    </el-table-column>
                    <el-table-column label="日期"    sortable property="date">

                    </el-table-column>
                    <el-table-column label="操作" width="100" ailgn="center">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-delete" type="danger" plain v-on:click="deleteSingle(scope.row.id)" v-if="deletePermission"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div v-show="!department" class="no-department">
                    <span>系统中还没配置任何科室！！</span>
                </div>
                <div v-show="department && !device" class="no-device">
                    <span>暂无检查设备！</span>
                </div>
            </div>

            <div class="pool-container">
                <el-row :span="24">
                    <div class="pool-container-title">
                        <div class="scedule-date">
                            <span>{{selectedSO?selectedSO.date:''}}</span>
                        </div>
                        <div class="add-pool">
                            <el-button v-on:click="showCreatePool" icon="el-icon-plus" size="mini" v-if="poolCreatePermission && selectedSO">新建</el-button>
                            <el-button v-on:click="showBatchCreate" icon="el-icon-plus" size="mini" v-if="poolCreatePermission && selectedSO">批量生成</el-button>
                            <el-button v-on:click="deletePoolMany" icon="el-icon-delete" size="mini" v-if="poolDeletePermission && selectedSO" type="danger">批量删除</el-button>
                        </div>
                    </div>
                </el-row>
                <el-table :data="pools" height="500" empty-text="暂无号池" size="mini" class="el-table" row-key="id" ref="table" v-show="department && device " :select-on-indeterminate="true" v-on:selection-change="poolSelectionChange">
                    <el-table-column type="selection">

                    </el-table-column>
                    <el-table-column label="开始" sortable align="center" property="startTimeStr">

                    </el-table-column>
                    <el-table-column label="结束" sortable align="center" property="endTimeStr">

                    </el-table-column>
                    <el-table-column label="最大数量" sortable align="center" property="maxCount">

                    </el-table-column>
                    <el-table-column label="已约" sortable align="center" property="currentCount">

                    </el-table-column>
                    <el-table-column label="可超限" >
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.allowOverFlow" :key="scope.$index" disabled></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="活动">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive" v-on:change="enbaleToggle(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column  ailgn="center" width="150" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" v-on:click="showEditPool(scope.row.id)" v-if="poolEditPermission" plain></el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" v-on:click="deletePool(scope.row.id)" v-if="poolDeletePermission" plain></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-show="department && device"
                               v-on:size-change="pageSizeChange"
                               v-on:current-change="currentPageChange"
                               :current-page="poolPage"
                               :page-sizes="[10, 15, 20, 30,40,50,100]"
                               :page-size="poolPageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="poolTotal">
                </el-pagination>
                <div v-show="!department" class="no-department">
                    <span>系统中还没配置任何科室！！</span>
                </div>
                <div v-show="department && !device" class="no-device">
                    <span>暂无检查设备！</span>
                </div>
            </div>
        </div>

        <!--ScheduleOverride对话框-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" v-on:close="resetForm" :close-on-click-modal="false">
            <el-form :model="scheduleOverride" :label-width="formLabelWidth" ref="dialogForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="日期" prop="date">
                                <el-date-picker v-model="scheduleOverride.date"
                                                type="date"
                                                size="mini"
                                                style="width:100%;"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                                :picker-options="pickerOptions"
                                                placeholder="请选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>  
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="submitCreate" size="mini">保存</el-button>
                <el-button v-on:click="resetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>

        <!--Pool对话框-->
        <el-dialog :title="poolDialogTitle" :visible.sync="poolDialogVisible" width="600px" v-on:close="resetPoolForm" :close-on-click-modal="false">
            <el-form :model="pool" :label-width="formLabelWidth" ref="poolDialogForm" :rules="poolRules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="开始时间" prop="startTime">
                                <el-time-select v-model="pool.startTime"
                                                size="mini"
                                                style="width:100%;"
                                                clearable
                                                :picker-options="{
                                                    start: '5:00',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a'
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="startChange"
                                                placeholder="开始时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="结束时间" prop="endTime">
                                <el-time-select v-model="pool.endTime"
                                                style="width:100%;"
                                                size="mini"
                                                :picker-options="{
                                                    start: '5:30',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a',
                                                    minTime:pool.startTime
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="endChange"
                                                clearable
                                                placeholder="结束时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="最大个数" prop="maxCount">
                                <el-input type="number" step="1" v-model="pool.maxCount" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="允许超限">
                                <el-switch v-model="pool.allowOverFlow" size="mini">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="pool.isActive" size="mini">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="savePool" size="mini">保存</el-button>
                <el-button v-on:click="resetPoolForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>

        <!--批量生成对话框-->
        <el-dialog :title="batchDialogTitle" :visible.sync="batchDialogVisible" width="500px" v-on:close="resetBatchForm" :close-on-click-modal="false">
            <el-form :model="batchPoolModel" label-width="100px" ref="batchDialogForm" :rules="poolRules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="开始时间" prop="startTime">
                                <el-time-select v-model="batchPoolModel.startTime"
                                                size="mini"
                                                style="width:100%;"
                                                clearable
                                                :picker-options="{
                                                    start: '5:00',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a'
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="startTimeChange"
                                                placeholder="开始时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="结束时间" prop="endTime">
                                <el-time-select v-model="batchPoolModel.endTime"
                                                style="width:100%;"
                                                size="mini"
                                                :picker-options="{
                                                    start: '5:30',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a',
                                                    minTime:batchPoolModel.startTime
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="endTimeChange"
                                                clearable
                                                placeholder="结束时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="间隔(分钟)" prop="maxCount">
                                <el-select v-model="batchPoolModel.interval" size="mini" style="width:100%;" placeholder="请选择">
                                    <el-option v-for="item in batchPoolModel.options"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="最大个数" prop="maxCount">
                                <el-input type="number" step="1" v-model="batchPoolModel.maxCount" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="允许超限">
                                <el-switch v-model="batchPoolModel.allowOverFlow" size="mini" >
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="submitBatchCreate" size="mini">创建</el-button>
                <el-button v-on:click="resetBatchForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>
